<template>
  <div id="box-center">
    <div id="box-menu">
      <el-select
        v-model="newDevice.nowRoom"
        placeholder="请选择"
        size="small"
        style="margin-right: 15px;"
        @change="updateData"
      >
        <el-option
          v-for="item in roomData"
          :key="item.number"
          :label="item.name"
          :value="item.number"
        >
          <span style="float: left">{{ item.name }}</span>
          <span style="float: right; color: #8492a6; font-size: 13px">{{ item.number }}</span>
        </el-option>
      </el-select>
      <el-button type="primary" icon="el-icon-plus" size="small" @click="showAdd">新建设备</el-button>
    </div>
    <div id="box-body">
      <div id="box-new" v-show="showNew">
        <el-divider></el-divider>
        <i class="el-icon-circle-plus-outline"></i>
        <span>设备名称：</span>
        <el-input
          placeholder="请输入内容"
          v-model="newDevice.label"
          style="width: 200px;margin-right: 20px;"
          size="small"
          clearable
        ></el-input>
        <el-button
          type="primary"
          icon="el-icon-check"
          size="small"
          style="float: right;"
          @click="doCreateDevice"
        >完成创建</el-button>
        <el-divider></el-divider>
      </div>
      <div id="box-change" v-show="showChange">
        <el-divider></el-divider>
        <i class="el-icon-warning-outline"></i>
        <span>设备名称：</span>
        <el-input
          placeholder="请输入内容"
          v-model="nowDevice.label"
          style="width: 200px;margin-right: 20px;"
          size="small"
          clearable
        ></el-input>
        <el-button
          type="primary"
          icon="el-icon-check"
          size="small"
          style="float: right;"
          @click="doChangeDevice"
        >完成修改</el-button>
        <el-divider></el-divider>
      </div>
      <el-table :data="tableData" style="width: 100%;" size="mini">
        <el-table-column label="名称">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.label }}</span>
          </template>
        </el-table-column>
        <el-table-column label="编号">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.value }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button size="mini" @click="handleEdit(scope.row)">编辑</el-button>
            <el-button size="mini" type="danger" @click="handleDelete(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import {
  getRoomList,
  getDeviceList,
  addDevice,
  changeDevice,
  deleteDevice,
} from "@/api/manage.js";
export default {
  data() {
    return {
      findMess: "",
      tableData: [],
      newDevice: {
        nowRoom: 0,
        label: "",
      },
      nowDevice: {
        id: "",
        value: "",
        label: "",
      },
      roomData: [],
      showNew: false,
      showChange: false,
    };
  },
  methods: {
    getMess() {
      getRoomList(1, 100).then((response) => {
        if (response.flag) {
          this.roomData = response.data.data;
          this.newDevice.nowRoom = this.roomData[0].number;
          this.updateData();
        } else {
          this.$message({
            message: response.message,
            type: "error",
            center: true,
          });
        }
      });
    },
    updateData() {
      getDeviceList(this.newDevice.nowRoom).then((response) => {
        if (response.flag) {
          this.tableData = response.data;
        } else {
          this.$message({
            message: response.message,
            type: "error",
            center: true,
          });
        }
      });
    },
    showAdd() {
      this.showNew = true;
      this.showChange = false;
    },
    handleEdit(row) {
      this.nowDevice = row;
      this.showNew = false;
      this.showChange = true;
    },
    handleDelete(id) {
      //删除
      deleteDevice(id).then(response => {
          if(response.flag) {
            this.$message({
              message: response.message,
              type: 'success',
              center: true
            })
          }else{
            this.$message({
              message: "删除设备失败",
              type: 'error',
              center: true
            })
          }
          this.updateData();
      })
    },
    doCreateDevice() {
      if (this.newDevice.label.length === 0) {
        this.$message({
          message: "设备名称不能为空",
          type: "error",
          center: true,
        });
      } else {
        //创建房间
        addDevice(this.newDevice.nowRoom, this.newDevice.label).then(response => {
          if(response.flag) {
            this.$message({
              message: response.message,
              type: 'success',
              center: true
            })
          }else{
            this.$message({
              message: "创建设备失败",
              type: 'error',
              center: true
            })
          }
          this.updateData();
        })
        this.showNew = false;
      }
    },
    doChangeDevice() {
      if (this.nowDevice.label.length === 0) {
        this.$message({
          message: "设备名称不能为空",
          type: "error",
          center: true,
        });
      } else {
        //创建房间
        changeDevice(this.nowDevice.id, this.nowDevice.label).then(response => {
          if(response.flag) {
            this.$message({
              message: response.message,
              type: 'success',
              center: true
            })
          }else{
            this.$message({
              message: "修改设备失败",
              type: 'error',
              center: true
            })
          }
          this.updateData();
        })
        this.showChange = false;
      }
    },
  },
  created() {
    this.getMess();
  },
};
</script>

<style lang="scss" scoped>
@import "@/styles/myCss/table.scss";
</style>